<template>
  <div class="article_item" :style="{'width':width}" @click="viewArticle">
    <div class="article_item_main">
        <h3 class="article_item_title">{{ title }}</h3>
        <small class="article_item_desc">{{ desc }}</small>
        <div class="article_bottom">
            <span class="article_author">
                <img :src="authorPic!=null?authorPic:require('../assets/img/avatar.png')" alt="">
                <small>&nbsp; {{ nickName }}</small>
            </span>
            <span>
                <el-icon><View /></el-icon><small>&nbsp; {{ eye }}</small>
            </span>
            <span>
                <el-icon><ChatDotSquare /></el-icon><small>&nbsp; {{ commentCount }}</small>
            </span>
            <span>
                <el-icon><Calendar /></el-icon><small>&nbsp; 
                    {{ date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日' }}</small>
            </span>
        </div>
    </div>
    <img class="article_img" :src="cover" alt="">
  </div>
</template>

<script>

export default {
    props:{
        id:Number,
        title:String,
        desc:String,
        timestamp:Number,
        width:{
            type:String,
            value:'100%'
        },
        cover:String,
        authorPic:String,
        nickName:String,
        eye:Number,
        commentCount:Number
    },
    data(){
        return{
            date:new Date(this.timestamp)
        }
    },
    methods:{
        viewArticle(){
            window.open(document.location.origin + '/article.html?id='+this.id)
        }
    }
}
</script>

<style scoped>
.article_item{
    display: flex;
    overflow: hidden;
    cursor: pointer;
    justify-content: space-between;
}
.article_img{
    height: 120px;
    width: 120px;
}
.article_bottom{
    display: flex;
    align-items: center;
    overflow: hidden;
}
.article_bottom span{
    margin: 0 10px;
    height: fit-content;
    display: flex;
    align-items: center;
}
.article_author img{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
}
.article_item_main{
    display: flex;
    padding-right: 10px;
    justify-content: space-between;
    flex-direction: column;
    align-content: center;
}
.article_item_title{
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.article_item_desc{
    -webkit-line-clamp: 4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-indent:28px
}
</style>